<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .ti {
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgb(45, 134, 33);
            padding: 8px 15px;
            font-size: 18px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <video src="" width="640" height="480" autoplay></video>
    <button id="btn">点击开始</button>
    <canvas width="640" height="400"></canvas>
    <button onclick="downloadHandle()">下载</button>
    <div class="ti">请保持不动，<span></span></div>

    <script>
        // 获取视频标签
        var video = document.querySelector('video')

        // 获取用户媒体设备
        navigator.getUserMedia(
            { video: true },
            function (stream) {
                video.srcObject = stream  // 主要
                video.play()
            },
            function (err) { console.log(err); }
        )

        var canvas = document.querySelector('canvas')
        var cxt = canvas.getContext('2d')


        // 点击拍照，把当前图像显示到canvas中
        var btn = document.querySelector('#btn')
        var span = document.querySelector('span')
        let i = 3
        span.innerHTML = i
        btn.onclick = function () {
            let time = setInterval(() => {
                i -= 1
                span.innerHTML = i

                if (i == 0) {
                    // 关闭定时器
                    clearInterval(time)

                    let canvas_img = cxt.drawImage(video, 0, 0, 640, 480)
                    var imgdata = canvas.toDataURL('png');
                    imgdata = imgdata.replace('image/png', 'image/jpeg')
                    // 将Base64编码进行编码
                    const encodedData = encodeURIComponent(imgdata);
                    // console.log('canvas_img', imgdata);
                    // 发送请求
                    ajax_img(encodedData)
                }
            }, 1000)
        }

        function ajax_img(img) {
            // console.log('前台数据', img);
            //创建AJAX对象
            var xhr
            if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
            else xhr = new ActiveXObject("Microsoft.XMLHTTP")  //兼容老版本IE

            //初始化（请求内容，访问地址，是否异步(默认异步，布尔值)，
            xhr.open('post', 'http://127.0.0.1/car')

            // 设置请求头 （"设置请求体的类型","设置参数查询字符串的类型"）
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(JSON.stringify({ url: img }))
            // 处理服务端返回的结果
            xhr.onreadystatechange = function (result) {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log('响应体：',xhr.response);
                    }
                }
            }
        }
    </script>
</body>

</html>